<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { onMounted, ref } from 'vue'
import { useSiteStore } from '@/store/siteinfo'

const siteInfo = useSiteStore()
const data = ref(null)

onMounted(async () => {
  let _data = await siteInfo.gen()
  data.value = {
    ..._data
  }
})
</script>

<template>
  <header id="header" class="flex-center justify-between">
    <hgroup
      class="logo"
      itemprop="publisher"
      itemscope=""
      itemtype="https://schema.org/Organization"
    >
      <h1 class="fullname" itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject">
        <a href="/" v-if="data">{{ data.siteTitle }}</a>
      </h1>
      <meta itemprop="name" content="" />
      <meta itemprop="url" content="" />
    </hgroup>
    <section class="header__right d-flex">
      <form method="get" action="/search" class="search">
        <input
          class="search-key btn btn-link btn-action right-btn uni-bg uni-shadow"
          name="q"
          :placeholder="$t('common.Please enter content')"
          type="text"
          required="required"
        />
        <i class="text-small czs-search-l flex-center"></i>
      </form>
      <a
        class="btn btn-link btn-action right-btn uni-bg uni-shadow menu-btn off-canvas-toggle flex-center ml-2"
        href="#aside"
      >
        <i class="text-large czs-menu-l flex-center"></i>
      </a>
    </section>
  </header>
</template>

<style scoped lang="scss"></style>
